<div class="uix-calendar">
    <div class="uix-cal-panel-day" ng-show="panels.day">
        <div class="uix-cal-month">
            <i class="uix-cal-pre-button glyphicon glyphicon-chevron-left" ng-click="prevMonth()"></i>
            <span class="uix-cal-month-name">
                <a href="javascript:;" ng-click="selectPanel('month')">{{FORMATS.SHORTMONTH[currentMonth]}}</a>
                <a href="javascript:;" ng-click="selectYearPanelHandler()">{{currentYear}}</a>
            </span>
            <i class="uix-cal-next-button glyphicon glyphicon-chevron-right" ng-click="nextMonth()"></i>
        </div>
        <div class="uix-cal-header clearfix">
            <div ng-repeat="day in dayNames track by $index">{{day}}</div>
        </div>
        <div class="uix-cal-body">
            <div class="uix-cal-row" ng-repeat="row in allDays">
                <div ng-class="{'uix-cal-select':day.index===currentDay,'uix-cal-outside':!day.inMonth,'uix-cal-weekday':day.isWeekend,'uix-cal-day-today':day.isToday,'uix-cal-day-disabled':day.isDisabled}"
                     class="uix-cal-day" ng-repeat="day in row" ng-click="selectDayHandler(day)">
                    <span class="uix-cal-day-inner">{{day.day}}</span>
                </div>
            </div>
        </div>
        <div class="uix-cal-footer">
            <div class="uix-cal-time" ng-click="selectTimePanelHandler()" ng-if="showTime">
                <span class="glyphicon glyphicon-time"></span>
                {{selectDate | date:'shortTime'}}
            </div>
            <div class="uix-cal-today-btn" ng-click="chooseToday()" ng-bind="FORMATS.TODAY" ng-disabled="disableToday"></div>
        </div>
    </div>
    <div class="uix-cal-panel-time" ng-show="panels.time"> <!--这里要用ng-show,不能用ng-if-->
        <uix-timepanel min-time="minTime" max-time="maxTime" ng-model="selectDate"></uix-timepanel>
        <div class="btn-group clearfix">
            <button class="btn btn-sm btn-default uix-cal-time-cancal" ng-click="timePanelBack()">返回</button>
            <button class="btn btn-sm btn-default uix-cal-time-now" ng-click="timePanelSelectNow()">此刻</button>
            <button class="btn btn-sm btn-default uix-cal-time-ok" ng-click="timePanelOk()">确定 </button>
        </div>
    </div>
    <div class="uix-cal-panel-month" ng-show="panels.month">
        <div class="uix-cal-month">
            <span class="uix-cal-month-name">
                <a href="javascript:;" ng-click="selectYearPanelHandler()">{{currentYear}}</a>
            </span>
        </div>
        <div class="uix-cal-body">
            <table class="uix-cal-month-table">
                <tr ng-repeat="monthRow in allMonths">
                    <td class="uix-cal-month-item"
                        ng-repeat="month in monthRow"
                        ng-click="chooseMonthHandler(month.index)"
                        ng-class="{'uix-cal-month-select':month.index === currentMonth}">
                        <span class="uix-cal-month-inner">{{month.name}}</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="uix-cal-panel-year" ng-show="panels.year">
        <div class="uix-cal-month">
            <i class="uix-cal-pre-button glyphicon glyphicon-chevron-left" ng-click="prev12Years()"></i>
            <span class="uix-cal-month-name">
                <a href="javascript:;">{{allYears[0][0]}}-{{allYears[3][2]}}</a>
            </span>
            <i class="uix-cal-next-button glyphicon glyphicon-chevron-right" ng-click="next12Years()"></i>
        </div>
        <div class="uix-cal-body">
            <table class="uix-cal-month-table">
                <tr ng-repeat="yearRow in allYears track by $index">
                    <td class="uix-cal-month-item uix-cal-year-item"
                        ng-repeat="year in yearRow track by $index"
                        ng-click="chooseYearHandler(year)"
                        ng-class="{'uix-cal-month-select':year === currentYear}">
                        <span class="uix-cal-month-inner">{{year}}</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>